<template>
    <div class="wrapper">
        <div class="login-box">
            <p class="title">选择二级供应商</p>
            <div class="supplier-list">
                <div class="supplier" v-for="(item, index) in supplier" :key="index">
                    <span>{{item}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                supplier:[
                    "121212121-测试一下（天津）国际贸易有限公司-经销",
                    "212121212-测试两下（河南）国际贸易有限公司-经销"
                ]
            }
        },
    }
</script>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    .login-box {
        width: 600px;
        padding: 60px 40px;
        background-color: #fff;
        border:2px solid #00C900;
        border-radius: 10px;
        box-shadow: 0 0 10px #00C900;
        .title {
            font-size: 20px;
            text-align: center;
            line-height:50px;
        }
        .supplier-list {
            text-align: center;
            border-bottom: 1px solid #F4F4F4;
            .supplier {
                border-top: 1px solid #F4F4F4;
                height: 40px;
                line-height:40px;
                cursor: pointer;
                &:hover {
                    background-color: #EBFCE9;
                    color:#00C900;
                }
            }
        }
    }
}
</style>